<template>
  <div>

      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <div class="info_l_head">
              <div>个人基本资料</div>
              <el-divider></el-divider>
            </div>
            <div>
              <div class="info_sel">
                <div class="info_sel_l">
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="籍贯" :label-width="formLabelWidth">
                    <el-select
                      class="form_select"
                      v-model="form.region"
                      placeholder="请选择籍贯"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="婚姻状况">
                    <el-radio-group v-model="form.type">
                      <el-radio class="info_sel_r_groupn" label="已婚"/>
                      >
                      <el-radio class="" label="未婚" name="1"/>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="info_sel_butn">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.type">
                      <el-radio class="info_sel_r_groupn" label="男"/>
                      >
                      <el-radio class="" label="女" name="1"/>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="出生日期" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="民族" :label-width="formLabelWidth">
                    <el-select
                      class="form_select"
                      v-model="form.region"
                      placeholder="请选择民族"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>

              </div>

              <div class="info_sel">
                <div class="info_sel_l">
                  <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="info_sel_s">
                  <el-form-item label="个人编号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>

              <el-form-item label="现居地址" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工作单位" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <div class="info_sel">
                <div class="info_sel_l">
                  <el-form-item label="文化程度" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="info_sel_s">
                  <el-form-item label="职务" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>
							<div class="info_sel">
							  <div class="info_sel_l">
							    <el-form-item label="昵称" :label-width="formLabelWidth">
							      <el-input v-model="form.nicname" autocomplete="off"></el-input>
							    </el-form-item>
							  </div>
							  <div class="info_sel_s">
							    <el-form-item label="邮箱" :label-width="formLabelWidth">
							      <el-input v-model="form.email" autocomplete="off"></el-input>
							    </el-form-item>
							  </div>
							</div>
							<div class="info_sel">
							  <div class="info_sel_l">
							    <el-form-item label="诊疗ID" :label-width="formLabelWidth">
							      <el-input v-model="form.zlid" autocomplete="off"></el-input>
							    </el-form-item>
							  </div>
							  <div class="info_sel_s">
							    <el-form-item label="职业类别编码" :label-width="formLabelWidth">
										<el-select
										  class="form_select"
										  v-model="form.region"
										>
										  <el-option label="1111" value="1111"></el-option>
										  <el-option label="2222" value="2222"></el-option>
										</el-select>
							    </el-form-item>
							  </div>
							</div>
							<el-form-item label="" prop="type">
							  <el-checkbox v-model="checked">属于课题人员</el-checkbox>
							</el-form-item>
              <!-- <el-form-item label="既往病史" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
              <el-form-item label="家族史" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item> -->

              <!-- <el-form-item label="编辑时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="value3"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00">
                </el-date-picker>
              </el-form-item> -->
            </div>
          </el-col>

					<el-col :span="11" :offset="1">
					  <div class="info_l_head">
					    <div>更多信息</div>
					    <el-divider></el-divider>
					  </div>
					  <div>
					    <div class="info_sel">
								<div class="info_sel_l">
									<el-form-item label="会员级别" :label-width="formLabelWidth">
										<el-select
											class="form_select"
											v-model="form.region"
											clearable
										>
											<el-option label="" value="shanghai"></el-option>
											<el-option label="" value="beijing"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="会员卡号" :label-width="formLabelWidth">
										<el-input v-model="form.name" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="数据来源" :label-width="formLabelWidth">
										<el-input v-model="form.name" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="最近参检时间" :label-width="formLabelWidth">
										<el-input v-model="form.name" autocomplete="off"></el-input>
									</el-form-item>
								</div>
								<div class="info_sel_butn">
									<el-upload
										class="avatar-uploader"
										action="https://jsonplaceholder.typicode.com/posts/"
										:show-file-list="false"
										:on-success="handleAvatarSuccess"
										:before-upload="beforeAvatarUpload"
									>
										<img
											class="info_sel_r_img"
											src="../../assets/img/img.jpg"
											alt=""
										/>
									</el-upload>
								</div>
							</div>

							<el-form-item label="备注" :label-width="formLabelWidth">
							  <el-input type="textarea" v-model="form.desc"></el-input>
							</el-form-item>
					    <div class="info_sel">
					      <div class="info_sel_l">
					        <el-form-item label="创建时间" :label-width="formLabelWidth">
					          <el-input v-model="form.name" autocomplete="off"></el-input>
					        </el-form-item>
					      </div>
					      <div class="info_sel_s">
					        <el-form-item label="创建人" :label-width="formLabelWidth">
					          <el-input v-model="form.name" autocomplete="off"></el-input>
					        </el-form-item>
					      </div>
					    </div>

					  </div>
					</el-col>
				</el-row>
			</el-form>
		</div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default {
    data(){
      return{

        dialogFormVisible:true,
        form:{},
        formLabelWidth:'80px',
        formInline:{

        },
      }
    }

  }
</script>

<style scoped>
.info_l{
	text-align: left;
	flex: 1;
}
.info_l_input {
  /* width: 82%; */
}
.info_l_button {
  margin-left: 10px;
}
.info_sel_r_groupn{
  margin-left: 40px;
}
.info_sel {
  display: flex;
  width:100%;
}
.info_sel_l {
  width: 50%;
}
.info_sel_r {
  width: 50%;
  margin-left: 50px;
}
.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}
.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}
.info_l /deep/ .el-select {
  width: 100%;
}
.info_l_head{
}
.pagination{
  text-align: center;
}
.top_dialog /deep/ .el-dialog{
  margin-top: 5vh !important;
}
.photog{
  width: 600px;
  height: 400px;
}
.info_sel_s_butn{
  margin:0px auto;
}
.info_sel_butn{
  margin-left:20px;
}
.info_sel_s{
  margin-left:20px;
  width:50%;

}
.add_info .el-divider--horizontal {
  margin-top: 10px;
}
</style>
